<template>
	<view class="index-search">
		<!-- 搜索框 -->

		<navigator url="/pages/search/search" style="width: 610rpx;padding: 10rpx 0;background-color: #fff;">
			<u-search searchIconColor="#FF7803" searchIconSize="48" placeholder="热门轮播" height="80rpx"
				:showAction="false">
			</u-search>
		</navigator>

		<!-- icon -->
		<view class="notice-icon" @click="goTo('/pages/messages/messages')">
			<image class="image" :src="imageUrl('notice-logo.png')" mode="" />
			<view class="no-read"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 主页搜索框
	.index-search {
		display: flex;
		padding: 16rpx 30rpx;
		background-color: #fff;

		.notice-icon {
			position: relative;
			padding: 20rpx 0 10rpx 18rpx;

			.image {
				width: 60rpx;
				height: 60rpx;
			}

			.no-read {
				position: absolute;
				top: 8rpx;
				right: 0;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				/* 辅助色-红色 */
				background: #F51F43;
			}
		}
	}
</style>